import React, { useState } from 'react';
import NumberField from '../../../../../components/common/NumberField';
import StatefulCalculationCard from '../../../../../components/common/StatefulCalculationCard';
import ExportData from '../../../../../components/common/ExportCalculateData';
import type { ResultItem } from '../../../../../../shared/types';

// 隧道长度计算类型定义
export interface TunnelLenthValues { 
    entranceX: number,
    entranceY: number,
    entranceZ: number,
    exitX: number,
    exitY: number,
    exitZ: number,
}

// 隧道长度计算结果类型定义
export interface TunnelLenthResult {
    horizontalLenth: number;
    height: number;
    actualLenth: number;
    gradient: number;
    orientationAngle: number;
}

// 隧道长度计算初始值配置
const initialValues: TunnelLenthValues = {
    entranceX: 0,
    entranceY: 0,
    entranceZ: 0,
    exitX: 0,
    exitY: 0,
    exitZ: 0,
};

// 隧道长度计算卡片组件配置
const tunnelLenthConfig = {
  key: 'TunnelLenth',
  label: '隧道长度计算',
  formKey: 'tunnel-lenth-calculation',
  initialValues: initialValues,
  calculationType: 'tunnel-lenth-calculation',
  resultFormatter: (data: TunnelLenthResult) => [
    { key: 'horizontalLenth', name: '水平长度', value: data.horizontalLenth, unit: 'm' },
    { key: 'height', name: '高度', value: data.height, unit: 'm' },
    { key: 'actualLenth', name: '实际长度', value: data.actualLenth, unit: 'm' },
    { key: 'gradient', name: '坡度', value: data.gradient, unit: '' },
    { key: 'orientationAngle', name: '朝向角度', value: data.orientationAngle, unit: '°' },
  ],
  renderFormFields: () => (
    <>
      <NumberField name="entranceX" label="入洞口X坐标" required step={0.001} tooltip="入洞口X坐标，单位为m" />
      <NumberField name="entranceY" label="入洞口Y坐标" required step={0.001} tooltip="入洞口Y坐标，单位为m" />
      <NumberField name="entranceZ" label="入洞口Z坐标" required step={0.001} tooltip="入洞口Z坐标，单位为m" />
      <NumberField name="exitX" label="出洞口X坐标" required step={0.001} tooltip="出洞口X坐标，单位为m" />
      <NumberField name="exitY" label="出洞口Y坐标" required step={0.001} tooltip="出洞口Y坐标，单位为m" />
      <NumberField name="exitZ" label="出洞口Z坐标" required min={0} step={0.001} tooltip="出洞口Z坐标，单位为m" />
    </>
  )
};

// 隧道长度计算卡片组件实现
const TunnelLenthCard: React.FC = () => {
  const [lastResults, setLastResults] = useState<ResultItem[] | null>(null);
  
  return (
    <StatefulCalculationCard
      title={tunnelLenthConfig.label}
      formKey={tunnelLenthConfig.formKey}
      initialValues={tunnelLenthConfig.initialValues}
      renderFormFields={tunnelLenthConfig.renderFormFields}
      calculationType={tunnelLenthConfig.calculationType}
      resultFormatter={(data) => {
        const results = tunnelLenthConfig.resultFormatter(data);
        setLastResults(results);
        return results;
      }}
      columnCount={2} // 使用2列布局
      tableHeight={500} // 设置表格高度为500px
      exportComponent={(form) => (
        <ExportData
          siteName={tunnelLenthConfig.label}
          inputs={form.getFieldsValue()}
          results={lastResults ? Object.fromEntries(lastResults.map(r => [r.key, r.value])) : {}}
          calculationType={tunnelLenthConfig.calculationType}
        />
      )}
    />
  );
};

export default TunnelLenthCard;